<template>
    <div class="PeoVacaMo">
        <div class="ibox-title">
            <h5>假期有效期</h5>
            <div class="ibox-tools">
                <!--<a  class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
                          
                          <a ><i class="fa fa-times"></i></a>-->
            </div>
        </div>
        <div class="ibox-centent">
            <div class="row">
                <div class="search">
                    <!-- <span>输入姓名</span>
                    <el-input placeholder="请姓名、编号查询" v-model="name" class="wi">
                    </el-input>
                    <span>输入姓名</span> -->

                    <span>公司</span>
                    <el-select v-model="companyChecked" placeholder="请选择">
					    <el-option
					      v-for="item in companyList"
					      :key="item.setid"
					      :label="item.descrshort"
					      :value="item.setid">
					    </el-option>
                    </el-select>
                    <span>年份</span>
                    <el-date-picker
                        v-model="years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleDate"
                        placeholder="选择年份">
                    </el-date-picker>
                    <span>假期类型</span>
                    <el-select v-model="leaveTypeCheck" placeholder="请选择">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
                    </el-select>
                    <el-button slot="append" @click="searchData">查询</el-button>
                </div>
                <div class="search" v-loading.fullscreen.lock="fullscreenLoading">
                    <!--<a class="btn" :href="downloadUrl">
                        <i class="fa fa-external-link"></i>导出今年员工假期
                    </a>-->
                    <!-- <el-upload class="upload-con" :data="urlDataImport" :action="uploadUrl" :on-progress="handlePreview" :on-remove="handleRemove" :limit="1" :on-success="handleSuccess">
                        <el-button size="small" type="primary"><i class="fa fa-sign-in"></i>批量导入模版</el-button>
                    </el-upload> -->
                    
                   <!--<a class="btn" @click="importLeave">
                        <i class="fa fa-external-link"></i>根据年度导出报表
                    </a> 
                    -->
                    <!--<el-upload class="upload-con" :data="urlLeaveData" :action="urlLeaveDataImport" :on-preview="handlePreview" :on-remove="handleRemove" :limit="1" :on-success="handleLeaveSuccess">
                        <el-button size="small" type="primary"><i class="fa fa-sign-in"></i>年份假期导入</el-button>
                    </el-upload>                    -->
                    
                    <!-- <a class="btn" @click="calcImport">
                        <i class="fa fa-external-link"></i>年份假期计算
                    </a>  -->
                    
                    <a class="btn" @click="add">
                        <i class="fa fa-plus"></i>新增
                    </a>

                </div>
                <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" min-width="40">
                            <template scope="scope">
                                <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="descr" label="公司" min-width="120">

                        </el-table-column>
                        <el-table-column property="year" label="年份">
                        </el-table-column>   
                        <el-table-column property="leaveType" label="假期类型" width="100">
                        </el-table-column>

                        <el-table-column property="startTime" label="有效期开始时间" min-width="90">
                        </el-table-column>
                        <el-table-column property="endTime" label="有效期结束时间" min-width="90">
                        </el-table-column>
                   
                        <el-table-column label="操作" min-width="100">
                            <template scope="scope">

                                <a class="modifyBtn" @click="modify(scope.row)">
                                    <i class="fa fa-edit"></i>修改
                                </a>
                                <span class="delete" @click="deletePeo(scope.row)" title="删除">
                                    <a >
                                        <i class="fa fa-remove"></i>
                                    </a>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>

            <div class="block">
                <span class="displayShow">共 {{totalNum}} 条记录</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10,20,50,100, 200]" :page-size.sync="pageSizeTable" layout="sizes,prev, pager, next" :total="totalNum">

                </el-pagination>
            </div>

        </div>




        <el-dialog title="新增" class="addDialog" :lock-scroll='lockFalse' :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="公司" :label-width="formLabelWidth">
                    <el-select v-model="form.companyChecked" placeholder="请选择">
					    <el-option
					      v-for="item in companyList"
					      :key="item.setid"
					      :label="item.descrshort"
					      :value="item.setid">
					    </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="假期类型" :label-width="formLabelWidth">

                    <el-select v-model="form.leaveType" placeholder="请选择">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年份" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleYearAdd"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="有效期开始时间" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateAddStart"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效期结束时间" :label-width="formLabelWidth">
                     <el-date-picker
                       
                        v-model="form.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateAddEnd"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>

                <!-- <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="form.emplid" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="假期类型" :label-width="formLabelWidth">
                    <select class="select" v-model="form.leaveType" placeholder="请选择假期类型">
                        <option label="年假" value="年假">年假</option>
                        <option label="有薪病假" value="有薪病假">有薪病假</option>
                        <option label="全薪病假" value="全薪病假">全薪病假</option>
                    </select>
                </el-form-item>
                <el-form-item label="年份选择" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleAddDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                

                <el-form-item label="假期总天数" :label-width="formLabelWidth">
                    <el-input v-model="form.sumDays"  auto-complete="off"></el-input>
                </el-form-item> -->
                <!--<el-form-item label="假期剩余天数" :label-width="formLabelWidth">
                    <el-input v-model="form.restDays"  auto-complete="off"></el-input>
                </el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :lock-scroll="lockFalse"  class="modifyDialog" title="修改" :visible.sync="dialogModifyVisible">
            <el-form :model="modifyForm">
                <el-form-item label="公司" :label-width="formLabelWidth">
                    <el-select  disabled v-model="modifyForm.descr" placeholder="请选择">
					    <el-option
					      v-for="item in companyList"
					      :key="item.setid"
					      :label="item.descrshort"
					      :value="item.setid">
					    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="假期类型" :label-width="formLabelWidth">

                    <el-select v-model="modifyForm.leaveType" placeholder="请选择">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年份" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="modifyForm.year"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleYearModi"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="有效期开始时间" :label-width="formLabelWidth">
                    <el-date-picker
                       
                        v-model="modifyForm.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateModiStart"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效期结束时间" :label-width="formLabelWidth">
                     <el-date-picker
                       
                        v-model="modifyForm.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateModiEnd"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogModifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from 'vue'
import {
	Input,
	Table,
	TableColumn,
	Upload,
	Tag,
	Radio,
	Pagination,
	Dialog,
	Form,
	FormItem,
	Select,
	Option,
	DatePicker,
	MessageBox,
	Message,
	Loading,
} from 'element-ui'


Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Tag)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(DatePicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Loading)

import haloTree from '@/components/router-component/treeDept'
// import cardLeader from "@/components/card-leader";
// import searchBox from "@/components/search-box";
// import adminUrl from "@/common/js/adminUrl";
// import CxoDialog from "@/components/userManager/dialog/CxoDialog";
// import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
// import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
// import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
// import RoleDialog from "@/components/userManager/dialog/RoleDialog";
export default {
	components: {
		// CxoDialog,
		// BusinessDialog,
		// DepartmentDialog,
		// HeadquartersDialog,
		// RoleDialog
		'halo-tree':haloTree
	},
	data() {
		return {

			tableData: [],
			currentPage: 1,
			pageSizeTable: 20,
			totalNum: 0,
			name: '',
			years: '',
			leaveTypeCheck:'',
			yearsList: ['2016', '2017'],
			urlDataImport:{
				token:localStorage.getItem('token')
			},
			lockFalse:false,
			//数据导入start
			dialogTableVisible:false,
			importData:[],
			importSaveData:[],
			date:'2017-11-20',
			full:true,
			//数据导入end

			//年份假期计算
			dialogYearVisible:false,
			calc:{
				calcLeaveType:'年假',
				calcDate:new Date().getFullYear() + '',
				calcDept:'',
				calcDateChange:new Date().getFullYear() + '',
				emplid:'',
			},
			tableCalcData:[],
			tableCalcDataSave:[],
			tags: [

	        ],
	        radio: '1',
	        DepartmentDialogVisible:false,
			defaultValue: '',
	        defaultChecked: '',
	        defaultProps: {
		        children: 'childList',
		        label: 'descr'
	        },
	        deptCalcTreeData:[],
	        defaultCheckDeptId:'',
	        tableCalcContainerShow:false,
			//

			fullscreenLoading:false,
			//创建 start
			dialogFormVisible:false,
			form: {
				companyChecked: '',
				regionType: '内地',
				emplid: '',
				leaveType: '年假',
				years:'',
				startTime:'',
				endTime:'',
				year:'',
				endTimeSave:'',
				startTimeSave:'',
				companyChecked:''
			},
			companyList:[],
			companyChecked:'',
			
			leaveTypeList:[{
		          value: '年假',
		          label: '年假'
		        }, {
		          value: '有薪病假',
		          label: '有薪病假'
	        }, {
		          value: '全薪病假',
		          label: '全薪病假'
	        }],
			
			modifyForm:{},
			formLabelWidth: '120px',
			//创建 end

			dialogImportVisible:false,
			importDefaultYear:new Date().getFullYear().toString(),
			importDefaultYearLeave:new Date().getFullYear().toString(),
			rigionArea:[{
	          value: '1',
	          label: '内地'
	        }, {
	          value: '2',
	          label: '香港'
	        }],
			importRegion:'1',
			
			dialogModifyVisible:false,
		}
	},
	watch:{
    	dialogYearVisible:function(newVal,oldVal){
    		if (newVal) {
    			this.tableCalcData = []
    			this.tags = []
    		}
    	}
	},
	computed: {
		downloadUrl: function() {
			return this.Axios.baseURI + this.URL.exportLeaveManager.url +'?token='+localStorage.getItem('token')
		},
		uploadUrl: function() {
			return this.Axios.baseURI + this.URL.leaveManagerImport.url
		},
		exportLeaveYearsUrl:function(){
        	return this.Axios.baseURI + this.URL.exportLeaveYears.url + '?token='+localStorage.getItem('token')+'&years='+this.importDefaultYearLeave//+'&regionType='+this.importRegion;
		},
		urlLeaveDataImport:function(){
        	return this.Axios.baseURI + this.URL.leaveByempExport.url +'?token='+localStorage.getItem('token')
		}
	},
	mounted: function() {
		this.getLeaveList()
        
        
		//      this.getDept();
	},
	created(){
		this.getCompanyMenu()
	},
	methods: {

		getCompanyMenu: function() {

			this.Axios
				.Post(this.URL.menuList.url, '')
				.then(res => {
					this.companyList = res.data.datas.twoCompanyList
				})
		},

    	getDept:function(){
    		var params={
    			depid:'',
    		}
    		this.Axios.Post(this.URL.leaveBydeptAuth.url,params).then(res =>{
    			this.deptCalcTreeData = res.data.datas.showDept
    			console.log(res,'getDept')
    		})
    	},
    	
		// type===2 代表简表请求
		handleSizeChange(val) {
			this.currentPage=1
			this.pageSizeTable = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2);            
		},
		handleCurrentChange(val) {
			// console.log(this.currentPage);
			this.currentPage = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2); 
		},


		//年份假期导入
		handleImportDate:function(val){
        	this.importDefaultYearLeave = val
        	console.log(val)
		},
		confirmImportYearLeave:function(){
        	
		},
        
		handleLeaveSuccess(response, files, fileList) {
		
			if (response.datas && response.datas.path) {
		            var params = {
		            	path:response.datas.path,
		            	fileName:response.datas.fileName,
		            }
		            window.location.href=this.Axios.baseURI+'/excelImport/download?path='+params.path+'&fileName='+params.fileName+'&token='+localStorage.getItem('token')				
			} else if (response.status  == 1) {
				Message({
					message: '导入成功',
					type: 'success'
				})
				this.getLeaveList()
			} else if (response.status  == 500) {
				Message({
					message: '系统错误',
					type: 'success'
				})				
			}

			//          this.Axios.Get('/excelImport/download',params)
			//              .then(res=>{
			//					console.log('下载成功');                 
			//              })
			//          this.importData = response.datas;
			//          this.importSaveData = JSON.parse(JSON.stringify(this.importData));
			//          this.dialogTableVisible = true;
		},        
		//查询start
		importLeave:function(){
        	
			this.dialogImportVisible = true
		},
		clearData:function(){
			this.currentPage=1
		},
		searchData:function(){
			this.clearData()
			this.getLeaveList()
		},
		handleDate:function(val){
			this.years = val
			console.log(val)
		},
		//查询end


		//年份假期计算
		
		calcImport:function(){
        	
			this.dialogYearVisible = true
		},
		handleCalcDate:function(val){
        	this.calc.calcDateChange = val
		},
		confirmCalcSearch:function(){
			
			var deptIds=[]
			this.tags.forEach(function(val){
				deptIds.push(val.deptid)
			})
			
			if (this.radio === '1' && deptIds.length<1) {
				Message({
					message: '至少选择一个部门',
					type: 'warning'
				})	
				return
			}else if(this.radio === '2' && !this.calc.emplid){
				Message({
					message: '请输入员工id',
					type: 'warning'
				})	
				return
			}

			if (this.radio === '1') {
				this.calc.emplid = ''
			}
			
			var params = {
				years:this.calc.calcDateChange,
				leaveType:this.calc.calcLeaveType,
				deptnames:deptIds,
				emplid:this.calc.emplid,
			}
			
			this.Axios.Post(this.URL.leaveCalculationBylist.url,params).then(res=>{
				this.tableCalcData = res.data.datas
				this.tableCalcDataSave = JSON.parse(JSON.stringify(this.tableCalcData))
				console.log(res)
			})
		},
		
		confirmCalcSave:function(){
			var params = {
				leaves:this.tableCalcDataSave
			}
			
			this.Axios.Post(this.URL.batchAddleaveManeger.url,params).then(res=>{
				if (res.data.status === 1) {
					Message({
						message: res.data.message,
						type: 'success'
					})
					setTimeout(function(){
			     		MessageBox.confirm('是否继续年份假期计算, 是否继续?', '确认', {
			                confirmButtonText: '确定',
			                cancelButtonText: '取消',
			                type: 'warning'
			                }).then(() => {
								
			                }).catch(() => {
							this.getLeaveList()
							this.dialogYearVisible = false
			                })
					},1000)
		                

                    
                    
				}
		
			})
			
		},
		
		calcDeptSearch:function(){
			this.DepartmentDialogVisible=true
		},
		
		handleCalcTime:function(val,type){
			if (!val.row[type]){return} 
			console.log(val.row.endDt)
			var date = new Date(val.row[type])
			var year = date.getFullYear()
			var Month = date.getMonth()>=9 ?date.getMonth()+1 : '0'+(date.getMonth()+1)
			var date = date.getDate()>9 ? date.getDate() : '0'+date.getDate()
            
			this.tableCalcData[val.$index][type] = year + '-' + Month + '-' + date
            
			this.tableCalcDataSave[val.$index][type] = year + '-' + Month + '-' + date
            
		},

		saveDeptChecked:function(){
			this.tags = this.$refs.deptSearchTree.$refs.tree.getSelectedNodes()
			this.DepartmentDialogVisible = false
			console.log(this.tags,'this.tags')
		},
		//



		//新增

		handleYearAdd:function(val){
			this.form.year = val
		},

		handleDateAddEnd:function(val){
			this.form.endTimeSave = val
		},

		handleDateAddStart:function(val){
			this.form.startTimeSave = val
		},

		confirmAdd:function(){
			this.postAddAjax(this.URL.insert.url).then(res=>{
				if (res.data.status === 1){
					this.dialogFormVisible = false
					Message({
						message: res.data.message,
						type: 'success'
					})
					this.getLeaveList()
				}
			})
		},
		checkNumber:function (theObj) {
		  var reg = /^\d+(\.\d+)?$/
		  if (reg.test(theObj)) {
		    return true
		  }
		  return false
		},
		postAddAjax:function(url,params){
        	
			if (!this.form.leaveType) {
				Message({
					message: '假期类型不能为空',
					type: 'warning'
				})	
				return
			}	

			if (!this.form.year) {
				Message({
					message: '年份不能为空',
					type: 'warning'
				})	
				return
			}			

			if (!this.form.companyChecked) {
				Message({
					message: '公司不能为空',
					type: 'warning'
				})	
				return
			}	

			if (!this.form.endTimeSave || !this.form.endTimeSave) {
				Message({
					message: '日期时间不能为空',
					type: 'warning'
				})	
				return
			}	

			// var params = {
			//     name:this.form.name,
			//     emplid:this.form.emplid,
			//     leaveType:this.form.leaveType,
			//     regionType:this.form.regionType,
			//     sumDays:this.form.sumDays,
			//     restDays:this.form.restDays,
			//     years:this.form.years
			// };

			console.log(this.form.leaveType,'this.form.leaveType')
			var params = {
				'endTime': this.form.endTimeSave,
				'leaveType': this.form.leaveType,
				'setid': this.form.companyChecked,
				'startTime': this.form.startTimeSave,
				'year': this.form.year
			}
			return this.Axios.Post(url,params)
		},
		handleAddDate:function(val){
			this.form.years = val
		},
		//

		//
		deletePeo:function(row){
			console.log(row,'row')
			this.deleteAjax(row)
		},
		deleteAjax:function(id){


			MessageBox.confirm('是否删除?', '提示', {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning'
			}).then(() => {
				var params={
					wfLeaveManagerConf : id
				}
				this.postAjax(this.URL.deleteMemberLeave.url,params)
					.then(res=>{
						if (res.data.status === 1){
							Message({
								message: res.data.message,
								type: 'success'
							})
							this.getLeaveList()
						}
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消导入'
				})          
			})


		},
		//

		//修改
		modify:function(row){

			var val = row.leaveType == '年假' ? '1' : (row.leaveType == '全薪病假' ? '2' : '3')
			this.modifyForm = JSON.parse(JSON.stringify(row))
			this.modifyForm.start_dt = this.modifyForm.startTime
			this.modifyForm.end_dt = this.modifyForm.endTime

			this.modifyForm.years = this.modifyForm.year
			// Vue.set(this.modifyForm,'years',val);
			// Vue.set(this.modifyForm,'leaveTypeId',val);
			this.dialogModifyVisible = true
		},
		handleYearModi:function(val){
			this.modifyForm.years = val
		},
		handleDateModiEnd:function(val){
			console.log(val)
			this.modifyForm.end_dt = val
		},
		handleDateModiStart:function(val){
			console.log(val)
			this.modifyForm.start_dt = val
		},
		confirmModify:function(){
        	
			if (!this.modifyForm.leaveType) {
				Message({
					message: '假期类型不能为空',
					type: 'warning'
				})	
				return
			}	

			if (!this.modifyForm.years) {
				Message({
					message: '年份不能为空',
					type: 'warning'
				})	
				return
			}			


			if (!this.modifyForm.start_dt || !this.modifyForm.end_dt) {
				Message({
					message: '日期时间不能为空',
					type: 'warning'
				})	
				return
			}	
        	
			// var params = {
			//     id:this.modifyForm.id,
			//     name:this.modifyForm.name,
			//     leaveType:this.modifyForm.leave_type,
			//     years:this.modifyForm.years,
			//     sumDays:this.modifyForm.sum_days,
			//     restDays:this.modifyForm.rest_days,
			//     startDt:this.modifyForm.start_dt,
			//     endDt:this.modifyForm.end_dt
			// };

			var params = {
				'descr': this.modifyForm.descr,
				'endTime':this.modifyForm.end_dt,
				'id': this.modifyForm.id,
				'leaveType': this.modifyForm.leaveType,
				'setid': this.modifyForm.setid,
				'startTime': this.modifyForm.start_dt,
				'year': this.modifyForm.years
			}
            
			this.postAjax(this.URL.saveMemberLeave.url,params)
				.then(res=>{
					this.dialogModifyVisible = false
					if (res.data.status === 1){
						Message({
							message: res.data.message,
							type: 'success'
						})
						this.getLeaveList()
					}                   
				})
		},
		//

		//导入
		confirmImport:function(){
			this.importSaveData.forEach(function(val,index){
				val.token = localStorage.getItem('token')
			})
			var params = this.importSaveData

			MessageBox.confirm('错误列将不会导入, 是否继续?', '确认提交', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.postAjax(this.URL.leLeaveaByhandbatch.url,params)
					.then(res=>{
						this.dialogTableVisible = false
						if (res.data.status == 1){
							Message({
								message: res.data.message,
								type: 'success'
							})
							this.getLeaveList()
						}                   
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消导入'
				})          
			})

		},
		//


		postAjax: function(url, params) {
			return this.Axios.Post(url, params)
		},
		getLeaveList: function() {
			// var params = {
			//     years: this.years,
			//     pageNum: this.currentPage,
			//     pageSize: this.pageSizeTable,
			//     name: this.name
			// };
			var params = {
				'leaveType': this.leaveTypeCheck,
				'pageNum': this.currentPage,
				'pageSize': this.pageSizeTable,
				'setid': this.companyChecked,
				'year': this.years
			}
			this.postAjax(this.URL.queryLeaveList.url, params)
				.then(res => {
					this.tableData = res.data.datas
					this.totalNum = res.data.total
				})
		},
		confirmSubmit:function(){

		},
		add:function(){
			this.form = {
				companyChecked: '',
				regionType: '内地',
				emplid: '',
				leaveType: '年假',
				years:'',
				startTime:'',
				endTime:'',
				year:'',
				endTimeSave:'',
				startTimeSave:'',
				companyChecked:''                
			}
			this.dialogFormVisible = true
		},
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		handlePreview(file) {
        	this.fullscreenLoading = true
			console.log(file)
		},
		handleSuccess(response, files, fileList) {
			this.fullscreenLoading = false
			if (response.datas && response.datas.path) {
	                Message({
	                    message: response.message,
	                    type: 'warning'
	                })
		            var params = {
		            	path:response.datas.path,
		            	fileName:response.datas.fileName,
		            }
		            window.location.href=this.Axios.baseURI+'/excelImport/download?path='+params.path+'&fileName='+params.fileName+'&token='+localStorage.getItem('token')				
			} else if (response.status == 1) {
				Message({
					message: '导入成功',
					type: 'success'
				})
				this.getLeaveList()
			} else if (response.status  == 500) {
				Message({
					message: '系统错误',
					type: 'success'
				})				
			}

			//          this.Axios.Get('/excelImport/download',params)
			//              .then(res=>{
			//					console.log('下载成功');                 
			//              })
			//          this.importData = response.datas;
			//          this.importSaveData = JSON.parse(JSON.stringify(this.importData));
			//          this.dialogTableVisible = true;
		},
		handleUploadEndDt:function(val,type){
			if (!val.row[type]){return} 
			console.log(val.row.endDt)
			var date = new Date(val.row[type])
			var year = date.getFullYear()
			var Month = date.getMonth()>=9 ?date.getMonth()+1 : '0'+(date.getMonth()+1)
			var date = date.getDate()>9 ? date.getDate() : '0'+date.getDate()
			this.importData[val.$index][type] = year + '-' + Month + '-' + date
			this.importSaveData[val.$index][type] = year + '-' + Month + '-' + date
            
		},

		handleUploadYear:function(scope,type){
			if (!scope.row[type]) {return}
			var date = new Date(scope.row[type])
			var year = date.getFullYear()
			this.importSaveData[scope.$index][type] = year
		},
		handleSumDays:function(scope){
			this.importSaveData[scope.$index]['sumDays'] = scope.row['sumDays']
		},
		handleRestDays:function(scope){
			this.importSaveData[scope.$index]['restDays'] = scope.row['restDays']
		},
		DeleteImport:function(scope){
			this.importData.splice(scope.$index,1)
			this.importSaveData.splice(scope.$index,1)
		}

	},

	beforeDestroy: function() {

	}
}
</script>

<style scoped>
.dialog {
    background-color: #fff;
    padding: 100px;
}
.PeoVacaMo .confirmExportYear{
    float: right;
    width: 80px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    background-color: #0066CC;
    color: #fff;
    border-radius:5px;
    text-align:center;
    margin-left:5px;
}

.PeoVacaMo .calcSearchBtn{
	width:140px;

}

.PeoVacaMo .first-title h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.1;
}
.PeoVacaMo .select{
    height: 36px;
    width: 100%;
    border: 1px solid #bfcbd9;
}
.PeoVacaMo .second-sec {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top-color: #00a65a;
}

.deg-contain {
    border: 1px solid #8391a5;
    min-height: 60px;
    border-radius: 6px;
}

.content-right {
    float: right;
    margin-top: 17px;
}

.PeoVacaMo .select-dept {
    font-size: 14px;
}

.PeoVacaMo .display-title {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
}

.PeoVacaMo .switch-btn {
    padding: 10px 10px;
}

.PeoVacaMo .collapse-card {
    padding: 10px 10px;
    border-bottom: 1px solid #f4f4f4;
}

.PeoVacaMo .third-card {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.PeoVacaMo .third-card .collapse-card .box-title {
    display: inline-block;
    font-size: 18px;
    color: #444;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.PeoVacaMo .third-card .collapse-card .box-title .box-header>.box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.PeoVacaMo .third-card .collapse-card .collapse {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
}




/*content*/

.PeoVacaMo {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

.ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
}

.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
}

.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}

.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}




/*ibox-centent*/

.ibox-centent {
    padding: 20px 10px 40px;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    min-height: 500px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

.row .tt {
    padding: 0 30px;
}

.row .search {
    width: 100%;
    margin-bottom: 15px;
    height:44px;
    line-height:44px;
    padding-left: 12px;
    padding-right: 12px;
}

.row .search span {
    margin: auto 5px auto 15px;
}

.row .search button {
    margin: auto 5px;
}
.row  .search .upload-con{
	margin-left:10px;
}


.row .search .btn {

    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
    padding: 5px;
    min-width: 60px;
    margin-left:20px;
}
.modifyBtn {

    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    display: inline-block;
    background-color: #18a689;
    border-radius: 5px;
    padding: 4px;
}

.row .search .btn i {

    margin-right: 2px;
}

.row .search .btn:first-child {
    margin-left: 20px;
}

.row .search .btn:hover {
    background-color: #ccc;
    color: #000;
    cursor: pointer;
}

.row .search .wi {
    width: 20%;
}

.el-button {
    background: #1ab394;
    border: 1px solid #1ab394;
    color: #fff;
}

.search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
}

.el-button .r {
    width: 66.66666667%;
}

.el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
}




/*table*/

.el-table__header-wrapper thead div {
    background-color: #fff;
    color: #1f2d3d;
}

.btn-sp {
    padding-left: -10px;
}

.btn-sp>a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.opt-btn-sp>a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.delete>a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
}

.el-pagination {
    margin-top: 20px;
}




/*角色授权*/

.modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
}

.modal-header .close {
    margin-top: -2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
}

.modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
}

.el-dialog__body {
    color: #48576a;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
}

.input {
    border: none;
}

.input:focus {
    border: none;
    outline: none;
}

.title-modify {
    height: 40px;
    line-height: 40px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
}




/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */

.glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}




/*图标*/

.glyphicon-off:before {
    content: "\e017";
}

.PeoVacaMo .displayShow {
    display: inline-block;
    height: 32px;
}

.PeoVacaMo .block {
    margin: 15px 5px;
    line-height: 32px;
}

.PeoVacaMo .block>div {
    display: inline-block;
}
</style>
<style>
/*修改element-ui样式*/


.PeoVacaMo .calcDialog .deptSelect .el-form-item__content{
	width: calc(100% - 120px );
}


.PeoVacaMo .el-radio-button__inner:hover {
    color: #333;
}
.PeoVacaMo .halo-tree .label{
	margin-left:0px;
}

.PeoVacaMo .el-radio-group .el-radio-button__inner:hover {
    background-color: #e7e7e7;
}

.PeoVacaMo .el-radio-group .el-radio-button__inner {
    background-color: #f4f4f4;
}

.PeoVacaMo .el-radio-group .is-active .el-radio-button__inner:hover {
    background-color: #d4d4d4 !important;
}




/*i*/

.PeoVacaMo .el-menu--collapse>.el-submenu>.el-submenu__title [class^="el-icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
}

.PeoVacaMo .el-input-group--append .el-input__inner,
.PeoVacaMo .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
}

.PeoVacaMo .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
}




/*table*/

.PeoVacaMo .el-table {
    border: none !important;
}

.PeoVacaMo .el-table th {
    background: #fff !important;
    height: 52px !important;
    vertical-align: left !important;
}

.PeoVacaMo .el-table__footer-wrapper thead div,
.PeoVacaMo .el-table__header-wrapper thead div {
    background: #fff !important;
    border-right: none;
}

.PeoVacaMo .el-table .cell {
    padding: 10px;
    cursor: pointer;
}

.PeoVacaMo .el-table .cell>div {
    text-align: center;
}

.PeoVacaMo .el-table__body-wrapper {
    overflow: auto !important;
}

.PeoVacaMo .el-table .cell,
.PeoVacaMo .el-table th>div {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.PeoVacaMo .ibox-tools dh {
    background: red;
    display: inline-block;
}

.PeoVacaMo .el-tag--success {
    margin-top: 3px;
}



.PeoVacaMo .btn-primary:hover,
.PeoVacaMo .btn-primary:focus {
    background-color: #18a689 !important;
}

.PeoVacaMo .btn-default:hover {
    background-color: #e6e6e6 !important;
    cursor: pointer;
    border: 1px solid #d2d2d2 !important;
}

.PeoVacaMo .el-form .el-form-item {
    width: 80%;
}
.PeoVacaMo .calcDialog .el-form .el-form-item {
    width: 46%;
}
.PeoVacaMo .calcDialog .el-form .el-form-item.deptSelect {
    width: 40%;
}
.PeoVacaMo .calcDialog .el-form .el-form-item.deptSelect1 {
    width: 20%;
}
.PeoVacaMo .calcDialog .el-form .el-form-item.deptSelect2 {
    width: 30%;
}
.PeoVacaMo .calcDialog .dialog-footer{
	text-align:center;
    line-height: 70px;
    height: 49px;
}

.PeoVacaMo .el-form .el-select {
    width: 80%;
}
.PeoVacaMo .calcDialog  .el-form .el-select {
    width: 100%;
}
.PeoVacaMo .calcDialog  .el-form .el-select .el-input{
    width: 100%;
}
.PeoVacaMo .el-table__empty-block {
    width: 100% !important;
}
.PeoVacaMo .el-table::after{
    width:0px;
}
.PeoVacaMo .upload-con {
    display:inline-block;
    vertical-align:top;
    width:120px;
    height:44px;
    overflow: hidden;
}
.PeoVacaMo .upload-con button{
    display:inline-block;
    height:44px;
    line-height:44px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.PeoVacaMo .upload-con button span{
    display:inline-block;
    height:28px;
    line-height:28px;
    text-align:center;
    vertical-align:top;
    font-size:14px;
}
.PeoVacaMo .el-table__header {
    width: 100% !important;
}
.PeoVacaMo .addDialog .el-date-editor.el-input{
    width:80%;
}
.PeoVacaMo .modifyDialog .el-date-editor.el-input{
    width:80%;
}
.PeoVacaMo .calcDialog  .el-date-editor.el-input{
    width:100%;
}
.PeoVacaMo .calcDialog .el-input{
	 width:100%;
}
/*.PeoVacaMo .calcDialog .el-form{
	padding-left:20%;
	width:60%;

}*/
.PeoVacaMo .calcDialog .el-form{

}
.PeoVacaMo .calcDialog .el-tag{
	margin-right:5px;
}
.PeoVacaMo .calcDialog .deptSearchIcon{

    height: 24px;
    background:#20a0ff;
    color:#fff;
    width: 50px;
    border-radius:5px;
    line-height: 24px;
    text-align: center;
}


.PeoVacaMo .halo-tree>ul:first-child>li:first-child:before{
	content:none;
	border-left: 0px solid #50bfff;
	width:0px;
}

.PeoVacaMo .halo-tree>ul:first-child>li:first-child::after{
	border-top:none;
	
}
</style>
